<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
</head>
<body>
    <ul id="repos">

    </ul>
    <!-- <script type="module"> -->
    <script>
        // https://api.github.com/users/shunwuyu/repos
        // 前后端分离 如何用JS主动得请求接口(异步任务)，拿到数据
        
        // 共同点：http请求 xhr对象
        // 区别：url 参数 
        const getJSON = async(url)=>{
            return new Promise((resolve,reject)=>{
                //executor 执行器
                //pending状态
                // xhr对象？ 早期接口请求的对象
                const xhr = new XMLHttpRequest()//实例化
                // http请求 GET 打开一个数据传输的通道
                xhr.open('GET','https://api.github.com/users/shunwuyu/repos')
                //发生请求
                xhr.send()
                //es6 之前的对象 连promise都没有 也就没有then
                //事件监听 回调函数
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 ){
                        //响应内容到达了
                        //早期的后端数据接口是 XML html也是XML的一种格式
                        //现在用JSON 
                    resolve(JSON.parse(xhr.responseText))
                    }
                }
            })
        }
        (async()=>{
        const data = await getJSON('https://api.github.com/users/shunwuyu/repos')
        //fullfilled
        document.getElementById('repos').innerHTML = 
        data.map(item => `<li>${item.name}</li>`).join('')
        })()
        
    </script>
</body>
</html>